<template>
    <div class="index">
        <div class="index-header flex">
            <div class="welcome">
                <div class="title">
                    <i class="iconfont icon-shouye"></i> 广东修炼科技维修企业有限公司，欢迎使用！
                </div>
                <div class="text">
                    <router-link to="/index">珠海市香洲区</router-link>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
                    <router-link to="/index">一类维修企业</router-link>
                </div>
            </div>
            <div class="data-list flex">
                <div class="data-item">
                    <div class="title">维修档案上传量</div>
                    <div class="count">1,256,123</div>
                </div>
                <div class="v-line"></div>
                <div class="data-item">
                    <div class="title">市区内排名</div>
                    <div class="count">8 <span> / 24</span></div>
                </div>
                <div class="v-line"></div>
                <div class="data-item">
                    <div class="title">累计维修车辆数</div>
                    <div class="count">88,888</div>
                </div>
            </div>
        </div>
        <div class="index-content flex">
            <div class="content-left">
                <div class="upload-count content-box">
                    <div class="c-header">
                        <p>近7日维修档案上传量</p>
                    </div>
                </div>
                <div class="new-state content-box">
                    <div class="c-header"><p>最新动态</p></div>
                </div>
            </div>
            <div class="content-right">
                <div class="file-upload content-box">
                    <div class="c-header"><p>健康档案上传</p></div>
                    <div class="list">
                        <div :class="['list-item', {'assign': $store.getters.stepIndex === '3-1'}]" @click="nextStep('/addStatement')">
                            <div class="title"><i class="iconfont icon-tongji"></i>新增结算单</div>
                            <div class="info">在线新增、打印、查看维修结算单</div>
                        </div>
                        <div :class="['list-item', {'assign': $store.getters.stepIndex === '2-1'}]" @click="nextStep('2-3', '/uploadStatement')">
                            <div class="title"><i class="iconfont icon-shangchuan"></i>上传非标准结算单</div>
                            <div class="info">上传从ERP、DMS等系统导出的或自定义的维修结算单</div>
                        </div>
                    </div>
                </div>
                <div class="policy-info content-box">
                    <div class="c-header">
                        <p>资讯与政策</p>
                        <router-link to="/policy">更多 >></router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        created(){
            console.log(this.$parent)
        },
        methods: {
            jump(path){
                this.$router.push(path);
            },
            nextStep(index, path){
                this.$store.commit('stepIndex', index);
                // 如果在引导步骤的时候， 禁止点击跳转
                // if(this.$store.getters.stepIndex !== '') return;
                this.jump(path);
            }
        }
    }
</script>

<style lang="less">
    .index{
        .index-header{
            padding: 20px 30px 30px;
            background: white;
            .welcome{
                flex-grow: 1;
                .title{
                    font-size: 18px;
                    color: @color-Title;
                    line-height: 36px;
                    .iconfont{
                        font-size: 24px;
                        position: relative;
                        top: 2px;
                        color: @color-Primary;
                        margin-right: 5px;
                    }
                }
                .text{
                    padding-left: 34px;
                    font-size: 14px;
                    margin-top: 10px;
                    color: @color-Sub;
                    a{
                        color: inherit;
                    }
                }
            }
            .data-list{
                .data-item{
                    text-align: right;
                    .title{
                        font-size: 14px;
                        color: @color-Sub;
                        line-height: 36px;
                        a{
                            color: inherit;
                        }
                    }
                    .count{
                        line-height: 20px;
                        color: @color-Title;
                        margin-top: 12px;
                        font-size: 28px;
                        span{
                            color: @color-Sub;
                            font-size: 18px;
                            vertical-align: bottom;
                        }
                    }
                }
                .v-line{
                    margin: 0 20px;
                    padding: 12px 0 4px;
                }
            }
        }

        .index-content{
            padding: 20px 30px;
            .content-left{
                flex-grow: 1;
            }
            .content-right{
                width: 30%;
                margin-left: 20px;
            }
            .upload-count{
                height: 300px;
            }
            .new-state{
                margin-top: 20px;
                height: 300px;
            }
            .file-upload{
                .list{
                    .list-item{
                        position: relative;
                        background: white;
                        transition: all linear 0.2s;
                        padding: 10px 30px 20px;
                        border-top: 1px solid @color-Border;
                        cursor: pointer;
                        &.assign{
                            z-index: 1200;
                            &::before{
                                content: '';
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                left: 0;
                                top: 0;
                                border: 3px dashed white;
                                transform: scale(1.03, 1.2);
                                border-radius: 3px;
                            }
                        }
                        &:hover{
                            box-shadow: 0 0 5px 1px rgba(150,150,150,0.3);
                            border-color: transparent;
                            &+div{
                                border-color: transparent;
                            }   
                        }
                        &:first-child{
                            border: none;
                        }
                        .title{
                            font-size: 14px;
                            color: @color-Title;
                            font-weight: bold;
                            // margin-bottom: 10px;
                            .iconfont{
                                vertical-align: middle;
                                font-size: 24px;
                                color: @color-Primary;
                                margin-right: 6px;
                            }
                        }
                        .info{

                        }
                    }
                }
            }
            .policy-info{
                margin-top: 20px;
                height: 260px;
            }
        }
    }
</style>
